<template>
  <div class="line-panel">
    <el-row class="wh100" :gutter="20">
      <el-col :span="17">
        <div id="chart" class="chart" />
        <div class="bottom-desc">
          <div class="month">6月</div>
          <div class="bottom-item">
            <div class="num"><count-to :start-val="0" :end-val="450" /></div>
            <div class="label">本月完成数量</div>
          </div>
          <div class="bottom-item">
            <div class="num"><count-to :start-val="0" :end-val="33" /></div>
            <div class="label">预期完成数量</div>
          </div>
          <div class="bottom-item">
            <div class="num"><count-to :start-val="0" :end-val="400" /></div>
            <div class="label">按期完成数量</div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div ref="qrCodePanel" class="num-panel">
          <div class="label">行政执法移动端</div>
          <div class="sub-label">扫描下载行政执法app</div>
          <div ref="qrCodeUrl" class="qrcode"  />
          <!-- <div class="total">
            <count-to :start-val="0" :end-val="2209" />
          </div>
          <div class="desc">
            <p>2020年年度案件</p>
            <p>(1-6月)</p>
          </div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import countTo from 'vue-count-to'
import QRCode from 'qrcodejs2'
export default {
  name: 'NumPanel',
  components: {
    countTo
  },
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      var option = {
        tooltip: {},
        grid: {
          top: '8%',
          left: '1%',
          right: '1%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          itemGap: 10,
          right: 10,
          data: ['当月完成量', '完成趋势'],
          textStyle: {
            color: '#868686'
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#93C4FF'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#868686',
              margin: 15
            }
          },
          axisTick: {
            show: false
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          max: 800,
          splitNumber: 5,
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#93C4FF'
            }
          },
          axisLabel: {
            margin: 20,
            textStyle: {
              color: '#868686'
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '完成趋势',
          type: 'line',
          showAllSymbol: true,
          symbol: 'emptyCircle',
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: '#F5A623' // 线条颜色
            },
            borderColor: '#F5A623'
          },
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: '#F5A623',
              lineStyle: {
                type: 'dotted' // 'dotted'虚线 'solid'实线
              }
            }
          },
          tooltip: {
            show: false
          },
          data: [200, 300, 485, 360, 220, 330]
        }, {
          name: '当月完成量',
          type: 'bar',
          barWidth: 20,
          tooltip: {
            show: false
          },
          label: {
            show: false
          },
          itemStyle: {
            normal: {
              color: '#34D5C3'
            }
          },
          data: [200, 300, 485, 360, 220, 330]
        }]
      }
      this.chart.setOption(option)
    }
  }

}
</script>

<style lang="scss" scoped>
.line-panel{
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0px 25px 25px 25px;
  .qrcode{
    margin: 0 auto;
  }
  .chart{
    height: 70%;
  }
  .bottom-desc{
    display: flex;
    justify-content: space-between;
    .month{
      flex: 0 0 25px;
      font-size: 16px;
      color: #333;
      font-weight: bold;
      height: 52px;
      line-height: 52px;
    }
    .bottom-item{
      background: #F6F6F6;
      padding: 10px;
      height: 52 px;
      width: calc(100% / 4);
      .num{
        color: #1762BD;
        font-weight: bold;
        font-size: 18px;
      }
      .label{
        color: #868686;
        font-size: 14px;
      }
    }
  }
  .wh100{
    width: 100%;
    height: 100%;
    .el-col{
      height: 100%;
    }
  }
  .num-panel{
    // background: url(./../../../assets/admin/layout/line_bg.png) no-repeat center;
    // background-size: 100% 100%;
    display: flex;
    align-content: center;
    flex-direction: column;
    height: 100%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    .label{
      color: #868686;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .sub-label{
      color: #999;
      font-size: 12px;
      margin-bottom: 5px;
    }
    .total{
      height: 70%;
      padding-top: 55%;
      font-size: 42px;
    }
    .desc{
      p{
        margin: 5px 0px;
        font-size: 16px;
      }
    }
  }
}
</style>
